<template>
  <div class="processPDF">
    <el-button
      type="primary"
      size="default"
      v-print="'#printMe'"
      style="margin-top: 20px"
      >下载</el-button
    >

    <div class="processPDF-a4" v-if="form" id="printMe">
      <div class="processPDF-a4-title">大货产品制作标准指导书</div>
      <div class="processPDF-a4-table">
        <div class="processPDF-a4-table-one">
          <div class="processPDF-a4-table-one-left">
            <el-image
              class="processPDF-a4-table-one-left-img"
              :src="form.wear_image[0]"
              :preview-src-list="form.wear_image"
              fit="contain"
            ></el-image>
          </div>
          <div class="processPDF-a4-table-one-right">
            <div class="processPDF-a4-table-one-right-text">
              <div>
                {{ form.type_no }}
              </div>
              <div>品名：{{ form.type_name }}</div>
            </div>
            <div class="processPDF-a4-table-one-right-text">
              <div>更新人：{{ form.log_list[0].username }}</div>
              <div>更新时间：{{ form.log_list[0].createtime }}</div>
            </div>
          </div>
        </div>
        <div class="processPDF-a4-table-two">
          <div class="leftText">
            <div class="leftHeight">生产缝制工艺要求</div>
          </div>
          <div class="processPDF-a4-table-two-right">
            <div class="processPDF-a4-table-two-right-text">
              用针型号针距缝份:
              {{ form.production_sewing_process_requirements.stitch }}
            </div>
            <div class="processPDF-a4-table-two-right-text">
              粘衬部位: {{ form.production_sewing_process_requirements.lining }}
            </div>
          </div>
        </div>
        <div class="processPDF-a4-table-two">
          <div class="leftText">
            <div class="leftTbzy">特别注意</div>
          </div>
          <div class="processPDF-a4-table-two-right">
            <div
              class="processPDF-a4-table-two-right-textimg"
              v-for="(item, index) in form.particular_attention"
              :key="index"
            >
              <el-image
                :preview-src-list="[item.url]"
                v-if="item.url"
                :src="item.url"
                fit="contain"
              ></el-image>
              <div class="processPDF-a4-table-two-right-text">
                {{ item.content }}
              </div>
            </div>
          </div>
        </div>
        <div class="processPDF-a4-table-two">
          <div class="leftText">
            <div class="leftGyxjt">工艺细节图</div>
          </div>
          <div class="processPDF-a4-table-two-right">
            <div class="processPDF-a4-table-two-right-image">
              <el-image
                v-for="(item, index) in form.detail_drawing"
                :preview-src-list="[item.url]"
                :key="index"
                :src="item.url"
                fit="contain"
              ></el-image>
            </div>
          </div>
        </div>
        <div
          class="processPDF-a4-table-three"
          v-for="(item, index) in form.process_instruction"
          :key="index"
        >
          <div class="processPDF-a4-table-three-left">
            <div class="processPDF-a4-table-three-left-imglabel">
              <img :src="item.img" alt="" />
              <div
                class="processPDF-a4-table-three-left-imglabel-label"
                v-for="(e, idx) in item.labels"
                :key="idx"
                :style="{ top: e.y + 'px', left: e.x + 'px' }"
                @click.stop
              >
                {{ idx + 1 }}
              </div>
            </div>
          </div>

          <div class="processPDF-a4-table-three-right">
            <div style="margin-bottom: 10px">图片名称：{{ item.title }}</div>
            <div
              class="processPDF-a4-table-three-right-content"
              v-for="(e, idx) in item.labels"
              :key="idx"
            >
              <div>{{ idx + 1 }}</div>
              <div>
                {{ e.content }}
              </div>
            </div>
          </div>
        </div>
        <div class="processPDF-a4-table-two">
          <div class="leftText">
            <div>唛头位置</div>
          </div>
          <div class="processPDF-a4-table-two-right">
            <div class="processPDF-a4-table-two-right-text">
              {{ form.mark_position.type == 5 ? "常规腰" : "主唛" }}：{{
                form.mark_position.main
              }}
            </div>
            <div class="processPDF-a4-table-two-right-text">
              {{ form.mark_position.type == 5 ? "牛筋腰" : "洗唛" }}：{{
                form.mark_position.second
              }}
            </div>
          </div>
        </div>
        <div class="processPDF-a4-table-two">
          <div class="leftText">
            <div>样衣修改意见</div>
          </div>
          <div class="processPDF-a4-table-two-right">
            <div class="processPDF-a4-table-two-right-text">
              {{ form.sample_clothes_modification_comments }}
            </div>
          </div>
        </div>
        <div class="processPDF-a4-table-two">
          <div class="leftText">
            <div>锁定要求</div>
          </div>
          <div class="processPDF-a4-table-two-right">
            <div class="processPDF-a4-table-two-right-text rightrequirements">
              <div
                v-for="(item, index) in form.requirements_for_locking_nails"
                :key="index"
                style="margin-bottom: 5px"
              >
                要求{{ index + 1 }}：{{ item.title }}
              </div>
            </div>
          </div>
        </div>
        <div class="processPDF-a4-table-two">
          <div class="leftText">
            <div>特殊工艺要求</div>
          </div>
          <div class="processPDF-a4-table-two-right">
            <div class="processPDF-a4-table-two-right-text rightrequirements">
              <div
                v-for="(item, index) in form.special_process_requirements"
                :key="index"
                style="margin-bottom: 5px"
              >
                要求{{ index + 1 }}：{{ item.title }}
              </div>
            </div>
          </div>
        </div>
        <div class="processPDF-a4-table-two">
          <div class="leftText">
            <div>包装规格要求</div>
          </div>
          <div class="processPDF-a4-table-two-right">
            <div class="processPDF-a4-table-two-right-text rightrequirements">
              <div
                v-for="(
                  item, index
                ) in form.packaging_specification_requirements"
                :key="index"
                style="margin-bottom: 5px"
              >
                要求{{ index + 1 }}：{{ item.title }}
              </div>
            </div>
          </div>
        </div>
        <div class="processPDF-a4-table-two">
          <div class="leftText">
            <div>裁剪要求</div>
          </div>
          <div class="processPDF-a4-table-two-right">
            <div class="processPDF-a4-table-two-right-text">
              {{ form.cutting_requirements }}
            </div>
          </div>
        </div>
        <div class="processPDF-a4-table-two">
          <div class="leftText">
            <div>后道工序</div>
          </div>
          <div class="processPDF-a4-table-two-right">
            <div class="processPDF-a4-table-two-right-text">
              {{ form.subsequent_process }}
            </div>
          </div>
        </div>
        <div class="processPDF-a4-table-two">
          <div class="leftText">
            <div>验收标准</div>
          </div>
          <div class="processPDF-a4-table-two-right">
            <div class="processPDF-a4-table-two-right-text">
              {{ form.acceptance_criteria }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { postAdminOperateLookProcess_sheet } from "@/api";
export default {
  data() {
    return {
      form: "",
    };
  },
  mounted() {
    if (this.$route.query.type_no) {
      this.postAdminOperateLookProcess_sheet(this.$route.query.type_no);
    }
  },
  methods: {
    onExportPDF() {
      // htmlToPdf.getPdf(
      //   `大货产品制作标准指导书`,
      //   "#pdfDom"
      // );
    },
    async postAdminOperateLookProcess_sheet(type_no) {
      let { form } = this;
      let obj = {
        type_no,
      };
      let res = await postAdminOperateLookProcess_sheet(obj);
      let formobj = Object.assign(form, res.data);
      this.form = formobj;
    },
  },
};
</script>

<style lang="scss" scoped>
.rightrequirements {
  flex-direction: column;
  text-align: left;
  > div {
    width: 100%;
  }
}
.leftHeight {
  height: 80mm;
  line-height: 80mm;
}
.leftTbzy {
  height: 40mm;
  line-height: 40mm;
}
.leftGyxjt {
  height: 120mm;
  line-height: 120mm;
}
.leftText {
  width: 40mm;
  border-right: 0.1mm solid #000000;
  border-top: 0.1mm solid #000000;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  > div {
    width: 30mm;
    font-weight: 600;
    text-align: center;
  }
}

.processPDF-a4 {
  background: #ffffff;
  width: 200mm;
  font-size: 14px;
  padding: 0 5mm;
  .processPDF-a4-title {
    font-size: 20px;
    font-weight: 800;
    text-align: center;
    padding: 16px 0;
  }
  .processPDF-a4-table {
    width: 200mm;
    border: 0.1mm solid #000000;
    .processPDF-a4-table-one {
      display: flex;
      .processPDF-a4-table-one-left {
        width: 40mm;
        height: 40mm;
        border-right: 0.1mm solid #000000;
        display: flex;
        justify-content: center;
        align-items: center;
        .processPDF-a4-table-one-left-img {
          width: 30mm;
          height: 30mm;
        }
      }
      .processPDF-a4-table-one-right {
        width: 160mm;
        .processPDF-a4-table-one-right-text {
          width: 160mm;
          height: 20mm;
          display: flex;
          > div:nth-child(1) {
            width: 40mm;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            border-right: 0.1mm solid #000000;
          }
          > div:nth-child(2) {
            width: 120mm;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
          }
        }
        > div:not(:nth-last-child(1)) {
          border-bottom: 1px solid #000000;
        }
      }
    }
    .processPDF-a4-table-two {
      display: flex;
      .processPDF-a4-table-two-left {
        width: 40mm;
        border-right: 0.1mm solid #000000;
        border-top: 0.1mm solid #000000;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        > div {
          width: 30mm;
          font-weight: 600;
        }
      }
      .processPDF-a4-table-two-right {
        width: 161mm;
        border-top: 1px solid #000000;
        display: flex;
        flex-direction: column;
        > div {
          box-sizing: border-box;
          word-break: break-all;
          width: 160mm;
          height: 100%;
          display: flex;
          align-items: center;
          // justify-content: center;
          padding: 5mm;
        }
        > div:not(:nth-last-child(1)) {
          border-bottom: 1px solid #000000;
        }
        .processPDF-a4-table-two-right-textimg {
          display: flex;
          > .el-image {
            width: 100px;
            margin-right: 10px;
          }
        }
        .processPDF-a4-table-two-right-image {
          display: flex;
          flex-wrap: wrap;
          > .el-image {
            width: 160px;
            margin-right: 20px;
            margin-bottom: 20px;
          }
        }
      }
    }
    .processPDF-a4-table-three {
      height: 148.5mm;
      border-top: 0.1mm solid #000000;
      display: flex;
      .processPDF-a4-table-three-left {
        padding: 10px;
        border-right: 0.1mm solid #000000;
        width: 300px;
        display: flex;
        align-items: center;
        .processPDF-a4-table-three-left-imglabel {
          width: 300px;
          height: 300px;
          position: relative;
          .processPDF-a4-table-three-left-imglabel-label {
            width: 26px;
            height: 26px;
            text-align: center;
            line-height: 26px;
            background: red;
            color: #ffffff;
            border-radius: 50%;
            position: absolute;
          }
          > img {
            width: 300px;
            height: 300px;
          }
        }
      }
      .processPDF-a4-table-three-right {
        width: 100%;
        padding: 10px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        .processPDF-a4-table-three-right-content {
          display: flex;
          margin-bottom: 10px;
          > div:nth-child(1) {
            font-size: 14px;
            margin-right: 10px;
            width: 14px;
            height: 14px;
            text-align: center;
            line-height: 14px;
            border: 1px solid #000000;
            border-radius: 14px;
            margin-top: 4px;
          }
          > div:nth-child(2) {
            width: calc(200mm - 320px - 40px);
          }
        }
      }
    }
  }
}
</style>